<template>
	<div class="equipment">
		<view class="top">
			<van-tabs v-model:active="active"  title-inactive-color="#B8B8B9" title-active-color="#fff"
				line-width="0" background="rgba(111,111,111,.0)" >
				<van-tab>
					<template #title>全球托管中心</template>
				</van-tab>
				<van-tab>
					<template #title>自行托管</template>
					<div class="nr"></div>
				</van-tab>
			</van-tabs>
			
		</view>
		<van-icon name="arrow-left" class="arrowLeft" color="#ffffff" size="20px" @click="trusteeship" />
		
		<view class="price_Taiwan">
			
			<div class="glass_box">
				<img src="/src/static/images/Trusteeship/glass.png" alt="" class="glass"/>
			</div>
		</view>
		<!-- 跳转页面tabbar不显示 -->
		<view class="btn_two">
			<van-button @click="computerHosting = true">添加运行设备</van-button>
		</view>

		<!-- 添加设备 -->
		<van-popup id="addSB" v-model:show="computerHosting" round position="bottom"
			:style="{ height: '70%', backgroundColor: '#222324' }">
			<view class="orderTitle">
				<h4>添加设备</h4>
				<van-icon name="cross" class="cross" />
			</view>
			<!-- 设备芯片码 -->
			<view class="equipmentOrder">
				<view class="leftContent">
					<view class="Remaining">
						<text>设备芯片码</text>
						<text class="greenColor">已输入{{message.length}}个</text>
					</view>
					<view class="steep">
						<view class="textareaBox">
							<view v-for="(item,index) in message" :key="index">{{item}}</view>
						</view>
					</view>
				</view>
				<view class="rightContent">
					<!-- 放图标 -->
					<van-icon name="scan" id="scan" />
				</view>
			</view>
			<powercardNum></powercardNum>
			<!-- 安全密码 -->
			<SecurityCode :value="secureValue" :textColor="textColor" @changeSecurityCode='changeSecurityCode'>
			</SecurityCode>
			<!-- 立即购买 (优化时封装)-->
			<view class="bottomBtn">
				<ProButton class="btn" @click="trusteeshipFn">
					<template v-slot:text>
						<view>立即托管</view>
					</template>
				</ProButton>
			</view>
		</van-popup>
	</div>
</template>

<script setup lang="ts">
	import { showNotify } from 'vant';
	import { ref } from 'vue'
	import powercardNum from '@/components/equipmentC/powercardNum/index.vue'
	import SecurityCode from '@/components/equipmentC/SecurityCode/index.vue'
	import ProButton from '@/components/product/ProButton/index.vue'
	import { useStore } from 'vuex'
	const store = useStore()
	let computerHosting = ref<boolean>(false)
	let secureValue = ref<string>('123456') // 本地的安全密码(也就是用户输入的安全密码)
	let textColor = ref<string>('#fff') // 文字颜色的改变
	let message = ref(['gq83fuiieoih0qfri20q', 'gq83fuiieoih0qfri202', 'gq83fuiieoih0qfri201', 'gq83fuiieoih0qfri211', 'gq83fuiieoih0qfri288'])

	const trusteeshipFn = () => {
		console.log(secureValue.value)
		if (secureValue.value === store.state.securityCodeValue) {
			showNotify({ type: 'success', message: '托管成功', className: 'active' });
		} else {
			showNotify({ type: 'danger', message: '安全密码错误，请重新输入' });
			textColor.value = 'rgba(224, 32, 32, 1)'
		}
	}
	// 改变安全密码
	const changeSecurityCode = (code : string) => {
		secureValue.value = code
	}
	// 回退上一页
	const trusteeship = () => {
		uni.navigateBack();
	}
</script>

<style lang="scss" scoped>
	.nr{
		position: fixed;
		z-index: 3;
		top: 400px;
		left: 20px;
		height: 1000px;
		background-color: #21F5EA;
		
	}
	.equipment{
		background: url('./src/static/images/Trusteeship/back.png') no-repeat;
		background-size: 100%;
	}
	.glass_box{
		.glass{
			width: 100%;
			position: absolute;
			top: 360px;
			left:0;
		}
	}
	.conent{
		min-height: 100vh;
		overflow-y: auto;
	}
	::v-deep.van-tabs__line {
		background-color: transparent;
	}
	
	::v-deep.van-tabs__nav.van-tabs__nav--line {
		// width: 200px;
		// margin: 0 auto;
		// height: 64px;
	}
	
	::v-deep span.van-tab__text.van-tab__text--ellipsis {
		font-size: 32px;
		height: 64px;
		line-height: 64px;
	}
	
	::v-deep.van-tab {
		// width: 160px;
	}
	
	::v-deep.van-tabs__wrap {
		height: 88px;
	}
	
	::v-deep.van-tabs--line .van-tabs__wrap {
		height: auto;
	}
	
	// tabs切换样式
	::v-deep.van-tabs__nav.van-tabs__nav--line {
		// border: 1px solid #707173;
		border-radius: 50px;
		padding: 0;
		margin-top: 30px;
		// width: 360px;
	}
	
	::v-deep.van-tab--active {
		// border: 1px solid #fff;
		border-radius: 50px;
	}
	
	::v-deep.van-tabs__content {
		color: #fff;
	}
	.content{
		min-height: 100vh;
	}
	
	
	
	
	::v-deep #addSB {
		border-radius: 40px;
	}

	::v-deep .van-notify {
		height: 124px;
		font-size: 28px;
		color: #fff;
		border-bottom-left-radius: 40px;
		border-bottom-right-radius: 40px;
	}

	::v-deep #scan {
		border-left: 1px solid gray;
		padding: 0 0 0 32px;
		margin-top: 24px;
	}


	.equipment {
		position: relative;
		height: 100vh;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.orderTitle {
			position: relative;
			width: 91%;
			height: 97px;
			color: #fff;
			text-align: center;
			line-height: 97px;
			// padding: 24px 0;
			font-size: 32px;
			margin: 0 auto;
			border-bottom: 1px solid rgba(255, 255, 255, 0.1);

			&>h4 {
				font-weight: normal;
			}

			.cross {
				position: absolute;
				top: 50%;
				right: 5%;
				transform: translateY(-50%);
			}

			.arrowLeft {
				position: absolute;
				top: 50%;
				left: 5%;
				transform: translateY(-50%);
			}
		}

		.equipmentOrder {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 91%;
			margin: 40px auto 0 auto;
			color: #fff;
			font-size: 24px;

			.leftContent {
				width: 85%;

				.Remaining {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin: 0 0 16px 0;

					.greenColor {
						color: rgba(0, 208, 185, 1);
					}
				}

				.steep {
					width: 100%;
					height: auto;
					background-color: rgba(255, 255, 255, 0.10);
					border-radius: 16px;
					border: 2px solid rgba(255, 255, 255, 0.6);

					.textareaBox {
						width: 321px;
						margin: 0 auto;
						text-align: center;

						&>view {
							margin: 10px 0;
							font-size: 28px;
						}
					}
				}
			}

			.rightContent {
				width: 10%;
				// height: 90px;
				// background-color: red;
				margin-top: 50px;
				text-align: right;
				font-size: 32px;
			}
		}

		.arrowLeft {
			position: absolute;
			top: 1.5%;
			left: 2%;
		}

		.top {
			display: flex;
			width: 100%;
			justify-content: center;
			position: absolute;
			left: 0;
			top: 47px;

			.title {
				width: 100%;
				text-align: center;
				height: 56px;
				font-size: 40px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #21F5EA;
				line-height: 56px;
				letter-spacing: 1px;
			}
		}

		.powercard {
			position: absolute;
			top: 22px;
			right: 40px;
			color: #21F5EA;
			font-size: 28px;
		}

		.btn_two {
			position: absolute;
			bottom: 30px;
			left: 0;
			width: 100vw;
			padding: 0 32px;
			box-sizing: border-box;
			height: 88px;
			display: flex;
			justify-content: center;

			&>:nth-child(1) {
				width: 47%;
				height: 88px;
				background: linear-gradient(to right, rgba(6, 255, 221, 1), rgba(78, 71, 255, 1));
				border: none;
				border-radius: 16px;
				font-size: 28px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: rgba(0, 0, 0, 1);
			}
		}

		.bottomBtn {
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 112px;
			background: rgba(18, 19, 23, 1);
			border-top: 1px solid gray;


			.btn {
				width: 280px;
				height: 80px;
				font-size: 28px;
				color: rgba(18, 19, 23, 1);
				font-weight: bold;
				border-radius: 16px;
				background: linear-gradient(to right, rgba(6, 255, 221, 1), rgba(78, 71, 255, 1));
			}
		}
	}

	.price_Taiwan {
		.each {
			text-align: center;
			font-size: 200px;
			color: rgba(247, 181, 0, 1);
		}
		.image{
			width: 100%;
			position: absolute;
			top:0;
			left: 0;
		}
	}
</style>